<link href="/ast/css/bootstrap.min.css" rel="stylesheet">
<link href="/ast/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/ast/css/style.min.css" rel="stylesheet">
<link rel="stylesheet" href="/ast/layui/css/layui.css" />
<script type="text/javascript" src="/ast/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/ast/js/jquery.min.js"></script>
<script src="/ast/layui/layui.js"></script>
<style>
        .template-card {
            margin-bottom: 30px;
            text-align: center;
            height: auto;
        }
        .template-img {
            width: 100%;
            height: auto;
            max-height: 200px;
            object-fit: cover;
        }
        .template-name {
            font-weight: bold;
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div class="container-fluid">
	         <div class="row">
	             <div class="col-lg-12">
	                 <div class="card">
                     <div class="alert alert-info" role="alert"> 
                        <button onclick="creatnewmoudle()"  class="btn btn-primary select-template" >创建新模板</button>    
                    </div>
                     </div>
    <div class="container mt-5">
        <div class="row">
            <div class="col-12">
                
            </div>
        </div>
        <div class="row">
      
        </div>
    </div>
    <script>
        function base64_decode_move(base64, encoding = 'utf-8') {
    const binaryString = atob(base64);
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return new TextDecoder(encoding).decode(bytes);
}
function creatnewmoudle(){
        layer.open({
            type: 2,
            title: '创建新模板',
            area: ['80%', '90%'],
            content: '/plugin/others/html/creatnewmoudle.php'
        })
}
let tempsets;
        fetch('/plugin/others/json/template.json').then(res => res.json()).then(templates => {
            tempsets = templates;
            let card = '';
            for (var key in templates) {
                if (templates.hasOwnProperty(key)) {
                    var template = templates[key];
                    const cardDiv = document.createElement('div');
                    cardDiv.className = 'col-sm-6 col-md-4';
            const cardInnerDiv = document.createElement('div');
            cardInnerDiv.className = 'card template-card';
        const img = document.createElement('img');
        if ((template.img).indexOf('::') === 0) {
            img.src = (template.img).split('::')[1];
        }else{
            img.src = `/ast/json_img/${template.img}.jpg`;
        }
        img.alt = '';
        img.className = 'card-img-top template-img';
        const cardBody = document.createElement('div');
        cardBody.className = 'card-body';
        const title = document.createElement('h5');
        title.className = 'card-title template-name';
        title.textContent = template.name;
        const description = document.createElement('p');
        description.className = 'card-text';
        description.textContent = template.say;
        const link = document.createElement('a');
        link.className = 'btn btn-primary select-template';
        link.textContent = '预览';
        link.onclick = function() {
            var newhtml = base64_decode_move(template.content);
            layer.open({
                type: 1,
                title: '预览',
                area: ['80%', '90%'],
                content: `
                <link rel="stylesheet" href="/ast/login-user/tmwrite.css">
                ${newhtml}`
            })
        };
        const link2 = document.createElement('a');
        link2.className = 'btn btn-danger';
        link2.textContent = '删除';
        link2.onclick = function() {
            layer.confirm('确定删除吗？', {
                btn: ['确定', '取消'] 
            }, function() {
                    delete tempsets[key];
                    fetch('./ht/delmoudle.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(tempsets)
                    }).then(() => 
                    layer.msg('删除成功', {
                        icon: 1,
                        time: 2000
                    }, () => location.reload()
                    )   );
                });
        };
        cardInnerDiv.appendChild(img);
        cardBody.appendChild(title);
        cardBody.appendChild(description);
        cardInnerDiv.appendChild(cardBody);
        cardDiv.appendChild(cardInnerDiv);
        cardInnerDiv.appendChild(link);
        cardInnerDiv.appendChild(link2);
        document.querySelector('.row').appendChild(cardDiv);

}
        }});
    </script>